<template>
  <div class="login-bg">
    <div class="login-card">
      <div class="login-title">{{ loginTitle }}</div>
      <el-form :model="form" class="login-form">
        <el-form-item>
          <el-input v-model="form.username" placeholder="用户名">
            <template #prefix><el-icon><User /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="密码">
            <template #prefix><el-icon><Lock /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="showCaptcha = true">登录</el-button>
        </el-form-item>
        <div class="login-links">
          <el-link type="info">忘记密码?</el-link>
          <el-link type="primary" @click="goRegister" style="float:right;">没有账号？去注册</el-link>
        </div>
      </el-form>
      <el-dialog v-model="showCaptcha" title="请完成验证" width="350px" :close-on-click-modal="false">
        <div class="captcha-area">
          <div class="captcha-title">请选择字母 <b>{{ captchaTarget }}</b> <span class="captcha-refresh" @click="generateCaptcha">🔄 换一组</span></div>
          <div class="captcha-letters">
            <el-button v-for="(letter, idx) in captchaLetters" :key="idx" class="captcha-letter-btn" @click="selectLetter(letter)">{{ letter }}</el-button>
          </div>
          <div v-if="captchaError" class="captcha-error">选择错误，请重试！</div>
        </div>
        <template #footer>
          <el-button type="primary" :disabled="!captchaPassed" @click="onLogin">验证并登录</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue';
const route = useRoute();
const router = useRouter();
const form = ref({ username: '', password: '' });
const showCaptcha = ref(false);
const captchaLetters = ref([]);
const captchaTarget = ref('');
const captchaPassed = ref(false);
const captchaError = ref(false);
function generateCaptcha() {
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let arr = [];
  while (arr.length < 4) {
    const ch = letters[Math.floor(Math.random() * 26)];
    if (!arr.includes(ch)) arr.push(ch);
  }
  captchaLetters.value = arr;
  captchaTarget.value = arr[Math.floor(Math.random() * 4)];
  captchaPassed.value = false;
  captchaError.value = false;
}
function selectLetter(letter) {
  if (letter === captchaTarget.value) {
    captchaPassed.value = true;
    captchaError.value = false;
  } else {
    captchaPassed.value = false;
    captchaError.value = true;
  }
}
const loginTitle = computed(() => {
  const role = route.query.role;
  if (role === 'student') return '学生登录';
  if (role === 'teacher') return '教师登录';
  if (role === 'admin') return '管理员登录';
  return '大学生创新创业项目管理系统';
});
function onLogin() {
  showCaptcha.value = false;
  captchaPassed.value = false;
  // 登录成功后自动跳转
  const role = route.query.role;
  if (role === 'student') {
    router.push('/user-center');
  } else if (role === 'teacher') {
    router.push('/teacher');
  } else if (role === 'admin') {
    router.push('/admin');
  } else {
    router.push('/');
  }
}
function goRegister() { 
  const role = route.query.role;
  router.push(role ? `/register?role=${role}` : '/register'); 
}
// 弹窗每次打开都生成新验证码
watch(showCaptcha, v => { if (v) generateCaptcha(); });
</script>
<style scoped>
.login-bg {
  min-height: 100vh;
  background: url('https://img.zcool.cn/community/01b6b95d5e2e2fa801216518a8e1e7.jpg@1280w_1l_2o_100sh.jpg') center center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: #d6f2d6;
  border-radius: 32px;
  box-shadow: 0 4px 32px #2224;
  padding: 36px 32px 24px 32px;
  width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-title {
  color: #222;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  letter-spacing: 2px;
  text-align: center;
}
.login-form {
  width: 100%;
}
.login-btn {
  width: 100%;
  background: #b6d43a;
  color: #222;
  border: none;
  font-weight: bold;
  font-size: 18px;
  border-radius: 10px;
  margin-top: 8px;
}
.captcha-area {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e0e0e0;
  padding: 12px 16px 16px 16px;
  margin-bottom: 12px;
  margin-top: 8px;
}
.captcha-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.captcha-refresh {
  color: #409EFF;
  cursor: pointer;
  font-size: 13px;
}
.captcha-letters {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 8px 0;
}
.captcha-letter-btn {
  width: 48px;
  height: 48px;
  font-size: 22px;
  font-weight: bold;
  border-radius: 8px;
  margin: 0 6px;
}
.captcha-error {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 4px;
  text-align: center;
}
.login-links {
  text-align: right;
  margin-top: 8px;
}
</style> 